<template>
	<view class="eventArchivingList">
		<!-- 历史事件-列表页 -->
		<navBar title="历史事件" goBackUrl="/pages/homePage/homePage"  @goBack="goBack"></navBar>
		
		<view class="bgc"></view>
		
		<view class="nav">
			<view class="nav-item" v-for="item in navBarList" :key="item.id" :class="{ active: currentIndex === item.name }" @click="getSwitch(item)">{{ item.name }}</view>
		</view>
		
		<view class="search">
			<baseInput @inputChange="inputChange" @clearInput="clearInput"></baseInput>
		</view>
		<!-- @scrolltolower="scrollLower" -->
		<scroll-view scroll-y="true" class="scroll-box" >
			
			<view class="content">
				<!-- 未归档列表 -->
				<view class="list" v-if="currentIndex === '未归档'">
					<view class="list-item" v-for="(item, index) in list" :key="index">
						<view class="project"  @click="getEventInfo(item)">
							<view class="project-left">{{item.bizProjectName||''}}</view>
							<view class="project-right">{{item.sectionName||""}}/{{item.siteName||''}}</view>
						</view>
						<view class="station" @click="getEventInfo(item)">
							<view class="station-left">{{item.orgName||""}}</view>
							<view class="station-right">{{item.startTime2||''}}</view>
						</view>
						<view class="bot">
							<view class="tag-box">
								<view v-if="item.eqReturnState !== 2" class="tag tag-active" @click="getNotDevice(item)">设备未还</view>
								<view v-else class="tag tag-active2" @click="getNotDevice(item)">设备已还</view>
								<view v-if="item.materialReturnState === 0" class="tag tag-active" @click="getNotMaterial(item)">材料未还</view>
								<view v-else class="tag tag-active2" @click="getNotMaterial(item)">材料已还</view>
							</view>
							<view class="icon">
								<u-icon name="arrow-right" color="#6A819E" size="24"></u-icon>
							</view>
						</view>
					</view>
					<view class="" v-if="list.length>0">
						<u-loading-icon  v-if="showMoreLoading" style="margin-top: 20rpx;" text="加载中" textSize="18"></u-loading-icon>
						<u-loadmore v-else status="nomore"  nomoreText="已加载全部数据"	/>
					</view>
					<view class="" v-if="list.length==0">
						<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
				</view>
				
				<!-- 已归档 列表 -->
				<view class="list2" v-if="currentIndex === '已归档'">
					<view class="list2-item" v-for="(item, index) in list" :key="index">
						<view class="center" style="padding-bottom: 25rpx;" @click="getEventInfo(item)">
							<view class="project">
								<view class="project-left">{{item.bizProjectName||''}}</view>
								<view class="project-right">{{item.sectionName||""}}/{{item.siteName||''}}</view>
							</view>
							<view class="station">
								<view class="station-left">{{item.orgName||""}}...</view>
								<view class="station-right">{{item.startTime2||''}}</view>
							</view>
						</view>
						<view class="icon2">
							<u-icon name="arrow-right" color="#6A819E" size="24"></u-icon>
						</view>
					</view>
					<view class="" v-if="list.length>0">
						<u-loading-icon  v-if="showMoreLoading" style="margin-top: 20rpx;" text="加载中" textSize="18"></u-loading-icon>
						<u-loadmore v-else status="nomore"  nomoreText="已加载全部数据"	/>
					</view>
					<view class="" v-if="list.length==0">
						<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import baseInput from "@/components/baseInput/baseInput.vue"
	import { getListByNameByLike } from "@/api/emergency/emergencyDispatch.js"
	import mixins from "@/utils/mixins.js"
	export default {
		name: "eventArchivingList",
		mixins: [mixins],
		components: {
			baseInput
		},
		data() {
			return {
				navBarList: [{id: 1, name: "未归档"}, {id: 2, name: "已归档"}],
				currentIndex: "未归档",
				list: [], 
				projectName: null,   // 模糊搜索
				currPage:1,
				pageSize:10,
				total:0,
				showMoreLoading: false,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			scrollLower(){
				if(this.list.length < this.total){
					this.currPage++
					this.showMoreLoading = true
					this.pageSize = 10
					this.getList()
					console.log('我滚动到底部了')
				}
			},
			// 事件复盘列表
			async getList(){
				let archive 
				if( this.currentIndex === "未归档"){
					archive = 0
				}else{
					archive = 1
				}
				let _query={
					currPage: 1,
					pageSize: 10000,
					params:{
						keyword: this.projectName,  // 项目/工点名称
						startTime:  null,
						endTime:  null,
						state: 1,
						isArchive: archive,    // 1 归档 ,  0 未归档
					}
				}
				let res = await getListByNameByLike(_query)
				this.$nextTick(() => {
					this.total = res.result.total
					console.log(res.result.list, '138');
					// res.result.list.forEach(item=>{
					// 	item.startTime2 = this.getDate2(item.startTime)
					// 	this.list.push(item)
						
					// })
					this.list = res.result.list.map(it => ({
						...it,
						startTime2:this.getDate2(it.startTime)
					}))
					// this.list =  this.setArr(this.list)
					console.log(this.list, '数据');
					
				})
				// res.result.list.forEach(item=>{
				// })
				if(res.result.list.length==0){
					this.showMoreLoading = false
				}
				// console.log(this.setArr(this.list), '146hang1');
				this.showMoreLoading = false
			},
			// 切换已归档 和 未归档 tab
			getSwitch(item){
				this.currentIndex = item.name
				this.currPage = 1
				this.pageSize = 10000
				this.list = []
				this.getList()
			},
			//列表数据去重
			setArr(arr) {
				//  利用对象访问属性的方法，判断对象中是否存在key
				let newArr = [];
				let obj = {};
				for (var i = 0; i < arr.length; i++) {
				  if (!obj[arr[i].id]) {
					newArr.push(arr[i]);
					obj[arr[i].id] = true;
				  }
				}
				return newArr

			},
			// 获取 input框的值
			inputChange(value){
				console.log(value,'value')
				if(value){
					this.projectName = value
				}else{
					this.projectName = null
				}
				// clearTimeout(this.time)
				// this.time = setTimeout(()=>{
					this.currPage = 1
					this.pageSize = 10000
					this.list = []
					this.getList()
				// },500)
			},
			
			// 清空input框的值
			clearInput(){
				this.projectName = null
				this.currPage = 1
				this.pageSize = 10000
				this.list = []
				this.getList()
			},
			
			// 跳转到设备未还页面
			getNotDevice(item){
				// 如果 eqReturnState === 2
				// 就 显示材料已还并禁用按钮
				if(item.eqReturnState === 0 || item.eqReturnState === 1){
					uni.navigateTo({
						url: "/subpackage-emergency/pages/eventArchiving/components/deviceNotList",
						success(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('setData', {
								data: item
							})
						}
					})
				}
			},
			
			// 跳转到材料未还页面
			getNotMaterial(item){
				// 如果 materialReturnState === 1 或者 materialReturnState === 2
				// 就 显示材料已还并禁用按钮
				if(item.materialReturnState === 0){
					uni.navigateTo({
						url: "/subpackage-emergency/pages/eventArchiving/components/materialsNotList",
						success(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('setData', {
								data: item
							})
						}
					})
				}
			},
			
			// 跳转到事件详情页面
			 getEventInfo(item){
				 uni.navigateTo({
				 	url: "/subpackage-emergency/pages/eventArchiving/components/eventInfo",
					success(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('setData', {
							data: item
						})
					}
				 })
			 },
			
			goBack(url){
				uni.switchTab({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.eventArchivingList{
		width: 100%;
		height: 100%;
		/* #ifdef MP-WEIXIN */
			box-sizing: border-box;
			padding-top: 200rpx;
		/* #endif */
		.bgc{
			width: 100%;
			height: 30rpx;
			background-color: #F5F7FA;
		}
		.nav{
			display: flex;
			height: 110rpx;
			width: 100%;
			line-height: 110rpx;
			font-size: 36rpx;
			font-family: Noto Sans KR-Medium, Noto Sans KR;
			font-weight: 500;
			color: #445469;
			margin-bottom: 30rpx;
			.nav-item{
				flex: 1;
				text-align: center;
				border-bottom: 4rpx solid #E1E5ED;
			}
			.active{
				color: #2F80ED;
				border-bottom: 4rpx solid #2F80ED;
			}
		}
		
		
		.search{
			padding: 0rpx 35rpx;
			/* #ifdef MP-WEIXIN */
				margin-bottom: 38rpx;
			/* #endif */
		}
		
		.scroll-box{
			/* #ifdef APP-PLUS  || H5 */
				height: calc(100vh - 400rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
				height: calc(100vh - 500rpx);
				box-sizing: border-box;
			/* #endif */
			padding-top: 10rpx;
		}
		
		.content{
			// height: 100%;
			/* #ifdef APP-PLUS  || H5 */
				height: calc(100vh - 510rpx);
			/* #endif */
			padding: 0rpx 35rpx;
			padding-bottom: 40rpx;
			/* #ifdef MP-WEIXIN */
				box-sizing: border-box;
			/* #endif */
			.list{
				/* #ifdef APP-PLUS  || H5 */
					margin-top: 38rpx;
				/* #endif */
				// margin-top: 38rpx;
				.list-item{
					height: 270rpx;
					border-bottom: 2rpx solid #E2E5ED;
					
					.bot{
						padding-top: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.tag-box{
							display: flex;
						}
						.tag{
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							color: #6A819E;
							background: #f4f7ff;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							opacity: 1;
							text-align: center;
							margin-right: 25rpx;
						}
						.tag-active{
							color: #FF6A6A !important;	
							background: #fff0f0 !important;
							cursor: pointer;
						}
						.tag-avtive2{
							color: #aaaaaa !important;
							background: #fff0f0 !important;
							cursor: not-allowed;
						}
					}
				}
			}
			
			.project{
				padding-top: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Noto Sans Thai UI-ExtraCondensed, Noto Sans Thai UI;
				font-weight: 500;
				font-size: 32rpx;
				.project-left{
					color: #22204E;
					width: 300rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出则不换行
				}
				.project-right{
					color: #445469;
					width: 300rpx;
					text-align: right;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出则不换行
				}
			}
			.station{
				padding-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #6A819E;
				.station-left{
					width: 300rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出则不换行
				}
			}
			
			.list2{
				/* #ifdef APP-PLUS  || H5 */
					margin-top: 38rpx;
				/* #endif */
				// margin-top: 38rpx;
				.list2-item{
					border-bottom: 2rpx solid #E2E5ED;
					display: flex;
					align-items: center;
					
				}
				.center{
					flex: 1;
				}
				.icon2{
					width: 70rpx;
					text-align: right;
				}
			}
		}
	}
</style>
<style>
	page{
		height: 100%;
		width: 100%;
	}
	body{
		width: 100%;
		height: 100%;
	}
</style>
